<html>
	<head>
		<!-- login page title,css include and js lib include -->
		<title>ISS Login</title>
		<link href="../resources/css/login.css" rel="stylesheet" type="text/css"> 
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
	</head>
	<body>
		<h1 align="center">Intramural Sports Scheduler</h1>
		<!-- div shown and form used if existing user intends to log in -->
		<div align="center" id="login">
			<form id="loginForm" method="post" action="../model/login.php">
				Username : <input name="username" type="text" size="25"> <br>
				Password : <input name="password" type="password" size="25">
	
				<div id="buttons">
					<input id="submit" name="loginSubmit" type="submit" value="Login"></input>
					<input id="register" type="button" value="Register"></input>
				</div>
			</form>
		</div>
		<!-- if new user would like to join then show the following div with user registration form -->
		<div align="center">
			<div id="reg" align="center">
				<form name="userReg" method="post" action="../model/login.php">
					<h2>User Registration</h2>
					<div class="label">First Name :</div>
					<input name="firstname" type="text" />
					<div class="label">Last Name :</div>
					<input name="lastname" type="text" />
					<div class="label">Student Id :</div>
					<input name="student_id" type="text" />
					<div class="label">Username :</div>
					<input name="username" type="text" />
					<div class="label">Password :</div>
					<input name="password" type="password" /> <br /> 
					<input type="submit" name="regSubmit" value="Submit" />
				</form>
			</div>
		</div>
		<script type="text/javascript">
			//js to show registration form if new user wants to join and display appropriate alert on invalid user/password 
			$(document).ready(function(){
				$('#reg').hide();
				<?php if (isset($loginFailed)) {?>
					alert('Invalid user, please try again or register');
				<?php } ?>
				
				$('#register').click(function(){
					$('#login').hide();
					$('#reg').show();
				});
			});
		</script>
	</body>
</html>